<template>
  <div>
    <div class="top">
      <el-button type="primary" :disabled="selectIdList.length == 0" @click="cancelShareBatch">
        <span class="iconfont icon-cancel"></span>取消分享
      </el-button>
    </div>
    <div class="file-list">
      <Table :columns="columns" :showPagination="true" :dataSource="tableData" :fetch="loadDataList"
        :options="tableOptions" @rowSelected="rowSelected">
        <template #fileName="{ index, row }">
          <div class="file-item" @mouseenter="showOp(row)" @mouseleave="cancelShowOp(row)">
            <icon :fileType="row.fileType"></icon>
            <span class="file-name" :title="row.fileName">
              <span>{{ row.fileName }}</span>
            </span>
            <span class="op">
              <template v-if="row.showOp">
                <span class="iconfont icon-link" @click="copy(row)">复制链接</span>
                <span class="iconfont icon-cancel" @click="cancelShare(row)">取消分享</span>
              </template>
            </span>
          </div>
        </template>
        <template #expireTime="{ index, row }">
            {{ new Date(row.expirationTime).getFullYear() >= 2099 ? "永久" : row.expirationTime }}
          </template>
      </Table>
    </div>
  </div>
</template>

<script setup>
import http from "@/utils/http.js";
import useClipboard from "vue-clipboard3";
const { toClipboard } = useClipboard();
import { ref, reactive, getCurrentInstance, onMounted } from "vue";
const { proxy } = getCurrentInstance();

onMounted(() => {
  loadDataList();
});


const shareUrl = ref(document.location.origin + "/#/shareCheck/");

//列表
const columns = [
  {
    label: "文件名",
    prop: "fileName",
    scopedSlots: "fileName",
  },
  {
    label: "分享时间",
    prop: "createTime",
    width: 200,
  },
  {
    label: "失效时间",
    prop: "expireTime",
    scopedSlots: "expireTime",
    width: 200,
  },
  {
    label: "",
    prop: "",
    width: 200,
  },
];
//搜索
const search = () => {
  showLoading.value = true;
  loadDataList();
};
//列表
const tableData = ref({
  pageNo: 1,
  pageSize: 10,
  total: 30,
  list: [
    // 可以继续添加更多文件数据...
  ]
});

const tableOptions = {
  extHeight: 20,
  selectType: "checkbox",
};

const loadDataList = async () => {
  const result = await http.get(
    '/shares/searchAllByUserId'
  );
  tableData.value.list = result.data;
};

//展示操作按钮
const showOp = (row) => {
  tableData.value.list.forEach((element) => {
    element.showOp = false;
  });
  row.showOp = true;
};

const cancelShowOp = (row) => {
  row.showOp = false;
};

//复制链接
const copy = async (data) => {
  console.log(data);
  await toClipboard(  
    `链接:${shareUrl.value}${data.shareLink} 提取码: ${data.sharePassword}`
  );
  proxy.Message.success("复制成功");
};

//多选 批量选择
const selectIdList = ref([]);
const rowSelected = (rows) => {
  selectIdList.value = [];
  rows.forEach((item) => {
    selectIdList.value.push(item.shareId);
  });
};

//取消分享
const cancelShareIdList = ref([]);
const cancelShareBatch = () => {
  if (selectIdList.value.length == 0) {
    return;
  }
  cancelShareIdList.value = selectIdList.value;
  cancelShareDone();
};

const cancelShare = (row) => {
  cancelShareIdList.value = [row.shareId];
  cancelShareDone();
};

const cancelShareDone = async () => {
  proxy.Confirm(`你确定要取消分享吗？`, async () => {
    let result = await http.get(
      'shares/cancelShare',
      {
        params: {
        shareId: cancelShareIdList.value.join(","),
      }
      }
    );
    if (!result) {
      return;
    }
    proxy.Message.success("取消分享成功");
    loadDataList();
  });
};

</script>

<style lang="scss" scoped>
@import "@/assets/file.list.scss";

.file-list {
  margin-top: 10px;

  .file-item {
    .file-name {
      span {
        &:hover {
          color: #494944;
        }
      }
    }

    .op {
      width: 170px;
    }
  }
}
</style>